<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Datatables</title>

    <!-- Main Styles -->
    <link rel="stylesheet" href="../../static/styles/style.min.css">

    <!-- Material Design Icon -->
    <link rel="stylesheet" href="../../static/fonts/material-design/css/materialdesignicons.css">

    <!-- mCustomScrollbar -->
    <link rel="stylesheet" href="../../static/plugin/mCustomScrollbar/jquery.mCustomScrollbar.min.css">

    <!-- Waves Effect -->
    <link rel="stylesheet" href="../../static/plugin/waves/waves.min.css">

    <!-- Sweet Alert -->
    <link rel="stylesheet" href="../../static/plugin/sweet-alert/sweetalert.css">

    <!-- Data Tables -->
    <link rel="stylesheet" href="../../static/plugin/datatables/media/css/dataTables.bootstrap.min.css">
    <link rel="stylesheet" href="../../static/plugin/datatables/extensions/Responsive/css/responsive.bootstrap.min.css">

    <!-- Dark Themes -->
    <!--    <link rel="stylesheet" href="../../static/styles/style-black.min.css">-->
</head>

<body>
<div id="page1">
</div>

<div id="notification-popup" class="notice-popup js__toggle" data-space="75">
    <h2 class="popup-title">Your Notifications</h2>
    <!-- /.popup-title -->
    <div class="content">
        <ul class="notice-list">
            <li>
                <a href="#">
                    <span class="avatar"><img src="../../static/images/avatar-sm-1.jpg" alt=""></span>
                    <span class="name">John Doe</span>
                    <span class="desc">Like your post: “Contact Form 7 Multi-Step”</span>
                    <span class="time">10 min</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="avatar"><img src="../../static/images/avatar-sm-2.jpg" alt=""></span>
                    <span class="name">Anna William</span>
                    <span class="desc">Like your post: “Facebook Messenger”</span>
                    <span class="time">15 min</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="avatar bg-warning"><i class="fa fa-warning"></i></span>
                    <span class="name">Update Status</span>
                    <span class="desc">Failed to get available update data. To ensure the please contact us.</span>
                    <span class="time">30 min</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="avatar"><img src="../../static/images/avatar-1.jpg" alt=""></span>
                    <span class="name">Jennifer</span>
                    <span class="desc">Like your post: “Contact Form 7 Multi-Step”</span>
                    <span class="time">45 min</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="avatar"><img src="../../static/images/avatar-sm-6.jpg" alt=""></span>
                    <span class="name">Michael Zenaty</span>
                    <span class="desc">Like your post: “Contact Form 7 Multi-Step”</span>
                    <span class="time">50 min</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="avatar"><img src="../../static/images/avatar-sm-4.jpg" alt=""></span>
                    <span class="name">Simon</span>
                    <span class="desc">Like your post: “Facebook Messenger”</span>
                    <span class="time">1 hour</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="avatar bg-violet"><i class="fa fa-flag"></i></span>
                    <span class="name">Account Contact Change</span>
                    <span class="desc">A contact detail associated with your account has been changed.</span>
                    <span class="time">2 hours</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="avatar"><img src="../../static/images/avatar-sm-7.jpg" alt=""></span>
                    <span class="name">Helen 987</span>
                    <span class="desc">Like your post: “Facebook Messenger”</span>
                    <span class="time">Yesterday</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="avatar"><img src="../../static/images/avatar-2.jpg" alt=""></span>
                    <span class="name">Denise Jenny</span>
                    <span class="desc">Like your post: “Contact Form 7 Multi-Step”</span>
                    <span class="time">Oct, 28</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="avatar"><img src="../../static/images/avatar-sm-8.jpg" alt=""></span>
                    <span class="name">Thomas William</span>
                    <span class="desc">Like your post: “Facebook Messenger”</span>
                    <span class="time">Oct, 27</span>
                </a>
            </li>
        </ul>
        <a href="#" class="notice-read-more">See more messages <i class="fa fa-angle-down"></i></a>
    </div>
</div>
<div id="message-popup" class="notice-popup js__toggle" data-space="75">
    <h2 class="popup-title">Recent Messages<a href="#" class="pull-right text-danger">New message</a></h2>
    <div class="content">
    </div>
</div>

<div id="wrapper">
    <div class="main-content">
        <div class="row small-spacing">
            <div class="col-xs-12">
                <div class="box-content">
                    <form class="form-inline" role="form" style="float:left;">
                        <div class="form-group has-feedback">
                            <div class="input-group input-group-sm " align="center">
                                <div class="input-group-addon" >开始日期：</div>
                                <input id="start" class="form-control" type="date" value="2020-08-01"/>
                                <div class="input-group-addon" >结束日期：</div>
                                <input id="end" class="form-control" type="date" value="2020-08-31"/>
                            </div>
                        </div>
                        <button type="button" onclick="getData()"  class="btn btn-xs btn-warning" id="Select" ><i class="glyphicon glyphicon-search"></i> 查询</button>
                    </form>
                    <div style="margin-top: 100px">
                        <div id='main' style='width: 90%;height:400px;' align="center"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="../../static/scripts/jquery.min.js"></script>
<script src="../../static/scripts/modernizr.min.js"></script>
<script src="../../static/plugin/bootstrap/js/bootstrap.min.js"></script>
<script src="../../static/plugin/mCustomScrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="../../static/plugin/nprogress/nprogress.js"></script>
<script src="../../static/plugin/sweet-alert/sweetalert.min.js"></script>
<script src="../../static/plugin/waves/waves.min.js"></script>
<script src='../../static/echarts/echarts.min.js'></script>
<script type="text/javascript">

    //将集合中的数据保留两位小数
    function dataToFixed(data) {
        var seriesData = [];
        for (var i = 0; i < data.seriesSaleList.length; i++) {
            //将销量保留两位小数
            var temp = data.seriesSaleList[i].toFixed(2);
            seriesData.push(temp);
        }
        return seriesData;
    }

    //生成图标的方法
    function generateChart(data) {
        //基于准备好的DOM，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        //指定图表的配置项和数据
        myChart.clear();
        var option = {
            title: {
                text: '成交额曲线图'
            },
            //提示框组件
            tooltip: {
                //坐标轴触发，主要用于柱状图，折线图等
                trigger: 'axis'
            },
            //数据全部显示
            axisLabel: {
                interval: 0
            },
            //图例
            legend: {
                data: ['成交量']
            },
            //横轴
            xAxis: {
                data: data.xAxisList
            },
            //纵轴
            yAxis: {},
            //系列列表。每个系列通过type决定自己的图表类型
            series: [
                {
                    name: '成交量',
                    //折线图
                    type: 'line',
                    data: dataToFixed(data)//处理小数点数据
                }
            ]
        };
        //使用刚指定的配置项和数据显示图表
        myChart.setOption(option);
    }

    //buttion调用的方法
    function getData() {
        var start = $('#start').val();
        var end = $('#end').val();
        //异步请求
        $.post(
            "../orders/ordersCount",//访问地址
            {start: start, end: end},//携带的参数
            function (data) {
                generateChart(data);
            },
            "json"
        );
    }

    $(function () {

        $(document).ready(function() {
            $("#page1").load("/menu");
        });

        getData();
    })




</script>

</body>
</html>